<template>
  <v-app>
    <v-toolbar
      app
      :clipped-left="clipped"
    >
      <v-btn icon @click.stop="rightDrawer = !rightDrawer">
        <v-icon>menu</v-icon>
      </v-btn>
      <v-toolbar-title v-text="title"></v-toolbar-title>
      <v-spacer></v-spacer>
    </v-toolbar>
    <v-content>
      <router-view/>
    </v-content>
    <v-navigation-drawer
      temporary
      :right="right"
      v-model="rightDrawer"
      fixed
      app
    >
      <v-list>
        <v-list-tile @click="selectTitle">
          <v-list-tile-action>
            <v-icon>perm_identity</v-icon>
          </v-list-tile-action>
          <v-list-tile-title>选择称呼</v-list-tile-title>
        </v-list-tile>
        <v-list-tile @click="playGame">
          <v-list-tile-action>
            <v-icon>thumb_up_alt</v-icon>
          </v-list-tile-action>
          <v-list-tile-title>挑选名字</v-list-tile-title>
        </v-list-tile>
        <v-list-tile @click="showRank">
          <v-list-tile-action>
            <v-icon>list</v-icon>
          </v-list-tile-action>
          <v-list-tile-title>最新排名</v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-footer :fixed="fixed" class="justify-center" app>
      <span>&copy; 2018 huangxuyang.cn</span>
    </v-footer>
  </v-app>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      clipped: false,
      drawer: true,
      fixed: false,
      items: [{
        icon: 'bubble_chart',
        title: 'Inspire'
      }],
      miniVariant: false,
      right: false,
      rightDrawer: false,
      title: ''
    }
  },
  methods: {
    selectTitle() {
      this.$router.replace({path:"/"});
    },
    playGame() {
      this.$router.replace({path:"/game"});
    },
    showRank() {
      this.$router.replace({path:"/rank"});
    }
  }
}
</script>
